import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'  //  首页
// import Layout from '@/views/layout'  //  后台首页
// import Project from '@/views/backend/project'  //  我的项目
// import Doc from '@/views/backend/doc'
// import Workbench from '@/views/backend/workbench'
import Login from  '@/components/login'  //  登录页面

let Layout = (resolve) => {  //require.ensure是webpack的代码分块，将layout\组件的js代码单独加载，只在访问该组件的时候才加载，而非一开始全部加载
  return require.ensure([], () => {  //  第一个参数是要分块的组件的依赖
    resolve(require('@/views/layout'))  // 第二个参数是一个回调函数，可以加载对应的组件
  })
}
let Project = (resolve) => { 
  return require.ensure([], () => {  
    resolve(require('@/views/backend/project'))
  })
}
let Doc = (resolve) => { 
  return require.ensure([], () => { 
    resolve(require('@/views/backend/doc'))  
  }, 'abc')  //  第三个参数是chunk,Doc和Workbench的第三个参数相同，那么webpack在打包的时候将会把他们打包成一个js文件，不会单独打包
}
// let Workbench = (resolve) => { 
//   return require.ensure([], () => { 
//     resolve(require('@/views/backend/workbench'))
//   }, 'abc')
// }
let Workbench = (resolve) => { 
  return import('@/views/backend/workbench')  //  也可以直接使用import,但是不支持第二个参数，无法将js合并到一起
}

Vue.use(Router)  //  将路由Router作为Vue的一个插件，放在根实例中，那么在每个组件的内部都可以直接使用this.$route来访问这个实例信息
let router = new Router({
  mode: 'history',  //  设置路由的跳转模式
  linkActiveClass: 'is-active',  //  设置路由匹配时对应的元素的类名
  routes: [{
    path: '/',  //  配置首页
    component: Home,
    name: 'Home'
  }, {
    path: '/management',  //  配置后台首页
    name: 'Management',
    component: Layout,
    children: [{
      path: '/project',
      name: 'Project',
      component: Project,  // 我的项目
      meta: {
        login: true  // 设置一些自定义信息，我的项目必须要登录
      }
    }, {
      path: '/workbench',
      name: 'workbench',
      component: Workbench,  // 我的工作台
      meta: {
        login: true  // 设置一些自定义信息，我的工作台必须要登录
      }
    }, {
      path: '/doc',
      name: 'Doc',
      component: Doc // 我的文档
    }]
  }, {
    path: '/login',  //  配置登录
    name: 'Login',
    component: Login
  },{
    path: '*',  //  没有配置的路由全部重定向到根路径下
    redirect: '/'
  }]
})
router.beforeEach((to, from, next) => { // 路由钩子函数，在进入每一个路由之前执行的函数
  if (to.matched.some((item) => item.meta.login ))  {  //需要登录才能进入的页面
     // to.matched代表的是目标路由的所有路由信息（如包含父路由和子路由，是一个数组）
    // some函数是循环一个数组，如果有一项的meta.login为true就返回true
    // 也就是说只要父路由和子路由有一个需要登录那么就跳转到登录页面
    let info = router.app.$local.fetch('miaov');  //  router.app就是根实例this
    if (info.login) {  // 已经登录
        next();
    } else {
        router.push({  // 未登录， push不是数组中的push方法
          path: '/login',  // 跳转路由
          query: {  //  在 /login路由后添加query 参数
            redirect: to.path.slice(1)  //  记录用户本身想要去的页面路由，方便登录后直接跳转到该页面而非首页
          }
        })
    }
  }  else {  // 不需要登录的页面
    next();  // 直接加载
  }
  next();
})
export default router
